<template>
  <TManageLayout>
    <div class="add-course-form">
      <h2>添加课程</h2>
      <el-form :model="form" :label-position="'top'" label-width="120px">
        <el-form-item label="课程名称">
          <el-input placeholder="请输入课程名称" v-model="form.courseName" :class="{ 'border-blue': form.courseName }"></el-input>
        </el-form-item>
        <el-form-item label="选择教室">
          <el-select placeholder="请选择教室" v-model="form.classroom" :class="{ 'border-blue': form.classroom }">
            <el-option v-for="room in classrooms" :key="room.value" :label="room.label" :value="room.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择排课学期">
          <el-select placeholder="请选择排课学期" v-model="form.term" :class="{ 'border-blue': form.term }">
            <el-option v-for="term in terms" :key="term.value" :label="term.label" :value="term.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="button-container">
        <el-button type="primary" @click="submitForm" class="submit-button" :disabled="!isFormValid">提交</el-button>
      </div>
    </div>
  </TManageLayout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import TManageLayout from '@/components/TManageLayout.vue';
import emitter from '@/utils/eventBus';
import { addCourse } from '@/api/course';

const router = useRouter();
const form = ref({
  courseName: '',
  classroom: '',
  term: ''
});

const classrooms = ref([
  { value: '1', label: '教室101' },
  { value: '2', label: '教室102' }
]);

const terms = ref([
  { value: '1', label: '2023-2024学年第一学期' },
  { value: '2', label: '2023-2024学年第二学期' }
]);

const isFormValid = computed(() => {
  return form.value.courseName && form.value.classroom && form.value.term;
});

const submitForm = async () => {
  console.log('提交的表单数据：', form.value);
  
  // 调用添加课程的API
  try {
    // 实际调用API
    await addCourse(form.value);
    
    // 触发更新事件
    emitter.emit('course-added', form.value);
    
    ElMessage.success('课程添加成功');
    
    form.value.courseName = '';
    form.value.classroom = '';
    form.value.term = '';
    
    router.push('/teacher/manager');
  } catch (error) {
    console.error('添加课程错误:', error);
    ElMessage.error(`添加课程失败: ${error.message || '未知错误'}`);
  }
};
</script>

<style scoped>
.submit-button {
  width: 200px;
  height: 40px;
  background-color: #13227a;
  border-color: #13227a;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

:deep(.el-form-item__label) {
  text-align: left;
}

.add-course-form {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  height: 50px;
  line-height: 50px;
  width: 650px !important;
}

:deep(.el-select) {
  width: 650px !important;
}

:deep(.el-input),
:deep(.el-select) {
  --el-component-size: 50px;
  width: 650px !important;
}

:deep(.el-select__wrapper) {
  height: 50px !important;
}

:deep(.el-form-item) {
  margin-bottom: 35px;
}
</style>
